<!--
 * @description: 更多标签
 * @fileName: MoreTag
 * @author: 17076
 * @date: 2025/4/22-下午1:28
 * @version: V1.0.0
-->

<template>
  <cs-dialog
    :dialog="dialogOption"
    @onSubmit="save"
  >
    <div slot="content">
      <el-form v-model="infoForm" label-width="60px">
        <el-form-item label="提示词">
          <div class="prompt-area">
            <prompt-editor
              ref="editor"
              v-model="infoForm['promptRichText']"
              @update="(text) => { $set(infoForm, 'promptRichText', text) }"
            />
          </div>
        </el-form-item>
      </el-form>
      <!--      <div class="flex-row select-tags" style="align-items: center">-->
      <!--        <span>提示词：</span>-->
      <!--        -->
      <!--&lt;!&ndash;        <div&ndash;&gt;-->
      <!--&lt;!&ndash;          v-for="(item, index) in checkTags"&ndash;&gt;-->
      <!--&lt;!&ndash;          :key="index"&ndash;&gt;-->
      <!--&lt;!&ndash;          class="flex-row"&ndash;&gt;-->
      <!--&lt;!&ndash;          style="margin-right: 10px"&ndash;&gt;-->
      <!--&lt;!&ndash;        >&ndash;&gt;-->
      <!--&lt;!&ndash;          <span>{{ item.name }}</span>&ndash;&gt;-->
      <!--&lt;!&ndash;          <i class="el-icon-delete" @click="handleDeleteSelectTags(item)" />&ndash;&gt;-->
      <!--&lt;!&ndash;        </div>&ndash;&gt;-->
      <!--      </div>-->
      <div class="tabs-content">
        <el-segmented
          v-model="activeTabs"
          :options="tagsList"
          :extra-option="{ label: 'name', value: 'id' }"
          style="width: 400px"
        />
      </div>
      <div class="flex-row tags-content">
        <template v-for="(subItem, subIndex) in formatterSubTag()">
          <span :key="subIndex" @click="handleTagClick(subItem)">
            {{ subItem.name }}
            <i v-if="subItem['isDel'] === '1'" class="el-icon-delete" @click="handleDeleteTags(subItem)" />
          </span>
        </template>
        <el-input
          v-if="showAdd"
          v-model="tagName"
          size="mini"
          placeholder="自定义标签 10字以内"
          clearable
          style="width: 180px;margin-left: 10px"
          @keydown.enter.native="handleAddTag"
          @input="handleInput"
        />
        <span @click.stop="() => { showAdd = true }"><i class="el-icon-circle-plus-outline" style="margin-right: 3px" />添加</span>
      </div>
    </div>
  </cs-dialog>
</template>

<script>
import { addTags, delPromptLabel, queryAllTagsList } from '@/api/lens'

export default {
  name: 'MoreTag',
  data() {
    return {
      dialogOption: {
        title: {
          title: '提示词标签'
        },
        show: false
      },
      // 提示词内容
      infoForm: {
        promptRichText: ''
      },
      // 自定义标签？
      tagName: '',
      tagsList: [],
      showAdd: false,
      activeTabs: 0
    }
  },
  methods: {
    show(data) {
      this.infoForm = data || {}
      this.tagName = ''
      this.dialogOption.show = true
      this.fetchTagsList()
    },
    // 查询所有标签值
    fetchTagsList() {
      queryAllTagsList({ }).then(res => {
        this.tagsList = res.data || []
        if (this.tagsList.length > 0) {
          this.activeTabs = this.tagsList[0].id
        }
        // // 存在选中的镜头,将该镜头选中
        // if (this.checkTags.length > 0) {
        //   this.tagsList.forEach(item => {
        //     if (this.checkTags.find(row => row.id === item.id)) {
        //       this.$set(item, 'checked', true)
        //     }
        //   })
        // }
      })
    },
    // 格式化提示词标签类
    formatterTagClass(item) {
      return this.checkTags.findIndex(val => val.id === item.id) !== -1 ? 'active' : ''
    },
    // 标签点击
    handleTagClick(item) {
      // if (this.checkTags.findIndex(val => val.id === item.id) !== -1) {
      //   this.checkTags = this.checkTags.filter(val => val.id !== item.id)
      // } else {
      //   this.checkTags.push(item)
      // }
      this.$refs.editor.insertText(item['name'])
    },
    // 格式化子标签显示
    formatterSubTag() {
      const index = this.tagsList.findIndex(item => item.id === this.activeTabs)
      return index !== -1 ? this.tagsList[index].child : []
    },
    // 添加标签
    handleAddTag() {
      if (this.tagName.length === 0) {
        this.$baseMessage.error('标签名称不能为空!')
        return
      }
      addTags({ pid: this.activeTabs, name: this.tagName }).then(res => {
        if (res.code === 200) {
          this.showAdd = false
          this.tagName = ''
          this.fetchTagsList()
        }
      })
    },
    // 输入框输入,限制输入长度
    handleInput() {
      if (this.tagName.length > 10) {
        this.tagName = this.tagName.slice(0, 10)
      }
    },
    // 已选删除
    handleDeleteSelectTags(item) {
      this.checkTags = this.checkTags.filter(row => row.id.toString() !== item.id.toString())
    },
    // 删除自定义标签
    handleDeleteTags(item) {
      delPromptLabel(item.id).then(res => {
        if (res.code === 200) {
          this.fetchTagsList()
        }
      })
    },
    // 标签选中
    handleLensCheck(item) {
      if (this.checkTags.find(row => row.id.toString() === item.id.toString())) {
        this.checkTags = this.checkTags.filter(row => row.id.toString() !== item.id.toString())
      } else {
        this.checkTags.push(item)
      }
    },
    save(callback) {
      this.$emit('save', this.infoForm)
      callback(true)
    }
  }
}
</script>

<style scoped lang="scss">
.select-tags {
  color: #FFFFFF;
  >div {
    align-items: center;
    background: #333B4A;
    padding: 5px 8px;
    box-sizing: border-box;
    border-radius: 3px;
    font-size: 12px;
    >i {
      margin-left: 5px;
      cursor: pointer;
    }
  }
}
.tabs-content {
  margin-top: 10px;
  background: #272C36;
}
.tags-content {
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 10px 0;
  box-sizing: border-box;
  color: #999;
  max-height: 300px;
  overflow-y: auto;
  >span {
    background: #333B4A;
    padding: 5px 8px;
    box-sizing: border-box;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 8px;
    border: 1px solid transparent;
    margin-bottom: 10px;
  }
}
.prompt-area {
  background: #272C36;
  border: 1px solid #39414E;
  border-radius: 5px;
}
.active {
  background: #272C36 !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}
</style>
